<template>
  <van-popup
    v-model="updatePasswordDialog"
    get-container="#app"
    position="right"
    :style="{ width: '100%', height: '100%' }"
  >
    <van-nav-bar>
      <template #left>
        <span @click="updatePasswordDialog = false">返回</span>
      </template>
      <template #right>
        <span @click="updatePassword">确认</span>
      </template>
    </van-nav-bar>
    <van-form ref="changePasswordInputVO" label-width="65px" label-align="left" :scroll-to-error="true">
      <van-field
        v-model.trim="changePasswordInputVO.currentPassword"
        type="password"
        label="密码"
        name="currentPassword"
        placeholder="请输入密码"
      />
      <van-field
        v-model.trim="changePasswordInputVO.newPassword"
        type="password"
        label="新密码"
        name="newPassword"
        placeholder="请输入新密码"
      />
      <van-field
        v-model.trim="changePasswordInputVO.confirmPassword"
        type="password"
        label="确认密码"
        name="confirmPassword"
        placeholder="请再次输入新密码"
      />
    </van-form>
  </van-popup>
</template>
<script>
import validator from '@/lib/validate/mobile/validator';
import { api_PUT_UsersChangePassword } from '@/extend/api/swaggerApi/identity';
import { ChangePasswordInput } from '@/lib/form/swaggerForm';
export default {
  data() {
    const _this = this;
    return {
      updatePasswordDialog: false,
      changePasswordInputVO: new ChangePasswordInput(),
      changePasswordInputVO_Rules: {
        currentPassword: [
          {
            ...validator.required('请输入密码'),
            validator: validator.checkPwd,
            trigger: 'onBlur'
          }
        ],
        newPassword: [
          {
            ...validator.required('请输入新密码'),
            validator: validator.checkPwd,
            trigger: 'onBlur'
          }
        ],
        confirmPassword: [
          {
            ...validator.required('请输入新密码'),
            validator: (value, rule) => {
              // 判断
              if (_this.changePasswordInputVO.newPassword &&
                  _this.changePasswordInputVO.confirmPassword &&
                  _this.changePasswordInputVO.newPassword !== _this.changePasswordInputVO.confirmPassword
              ) {
                validator.callback(rule, '两次输入密码不一致');
                return false;
              }
              validator.callback(rule);
              return true;
            },
            trigger: 'onBlur'
          }
        ]
      }
    };
  },
  methods: {
    open() {
      this.changePasswordInputVO = new ChangePasswordInput();
      this.changePasswordInputVO.confirmPassword = '';
      this.updatePasswordDialog = true;
    },
    close() {
      this.updatePasswordDialog = false;
    },
    updatePassword() {
      this.$refs.changePasswordInputVO.validate().then(() => {
        api_PUT_UsersChangePassword(this.changePasswordInputVO).then(() => {
          this.$toast.success('密码修改成功');
          this.updatePasswordDialog = false;
        }, error => {
          this.$toast.fail(error.error.message);
        });
      });
    }
  }
};
</script>
